<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bookshop</title>

    <!-- Bootstrap -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/animate.min.css" rel="stylesheet">
    <link href="/assets/css/main.min.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">

    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic'
          rel='stylesheet' type='text/css'>
</head>
<body>


<div id="wrapper">
    <div id="page-content-wrapper" class="st-pusher">
        <div class="st-pusher-after"></div>
        <!-- ============================================== HEADER ============================================== -->

        <jsp:include page="header.jsp"/>


        <!-- ============================================== HEADER : END ============================================== -->
        <div class="content wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
            <div class="container">
                <div class="row">

                    <div class="divider">
                        <img class="img-responsive" src="/assets/images/shadow.png" alt="">
                    </div><!-- /.divider -->
                </div>
                <div class="row inner-top-xs single-book-block">
                    <div class="col-md-9 col-md-push-3">
                        <!-- .primary block -->
                        <div class="single-book primary-block">
                            <div class="row">
                                <div class="col-md-5 col-sm-5">
                                    <div class="book-cover">
                                        <img width="268" height="408" alt=""
                                             src="http://47.94.10.67/images/${book.imgUrl}">
                                    </div><!-- /.book-cover -->
                                    <div class="share-button">

                                        <!-- Go to www.addthis.com/dashboard to customize your tools -->
                                        <div class="addthis_native_toolbox inner-top-vs"></div>
                                    </div>
                                    <div class="list-unstyled link-block inner-top-50">
                                        <a href="#customer-reviews" class="customer-review"><i
                                                class="icon fa fa-comment"></i><span
                                                class="customer-review">学生评论（${comments.size}）↓ </span></a>
                                    </div>
                                </div>
                                <div class="col-md-7 col-sm-7">
                                    <div class="featured-book-heading">
                                        <h1 class="title">${book.name}</h1>
                                        <p class="singl-book-author">
                                            作者:
                                            <a href="#">${book.author}</a>
                                        </p>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="add-cart-button btn-group">
                                                <input type="hidden" id="bookId" value="${book.id}">
                                                <button class="btn btn-single btn-uppercase" onclick="borrowBook()" type="button">借阅该图书</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="description">
                                        <p>${book.content}</p>
                                    </div>
                                </div>
                            </div>
                        </div>                <!-- /.primary block -->

                        <div class="divider inner-top-xs">
                            <img src="/assets/images/shadow.png" class="img-responsive" alt="">
                        </div>

                        <div class="module wow fadeInUp" id="customer-reviews"
                             style="visibility: hidden; animation-name: none;">
                            <div class="module-heading home-page-module-heading margin-top-10">
                                <h2 class="module-title home-page-module-title "><span>学生评论（${comments.size}）</span></h2>

                            </div>
                            <!-- .customer reviews -->
                            <div class="module-body inner-top-xs" id="reviews">
                                <ul class="list-unstyled review-list">
                                    <li>
                                        <section class="paper">
                                            <div class="tape"></div>
                                            <div class="head"></div>
                                            <c:forEach items="${comments.list}" var="comments">
                                                <div class="row review-content">
                                                    <div class="col-md-2 col-sm-2">
                                                        <div class="customer-image-text">
                                                            <img src="/assets/images/customers/1.jpg" alt="">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-10 col-sm-10">
                                                        <h5 class="customer-name inner-right-xs">学号：${comments.stuNum}</h5>
                                                        <p class="posted-date"> 评论时间：
                                                            <fmt:formatDate pattern="yyyy年MM月dd日" value="${comments.createTime}" />
                                                        </p>
                                                        <p class="text">${comments.content}</p>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                            <%--<div class="bottom"></div>--%>

                                        </section>
                                    </li>

                                </ul>
                            </div>


                            <c:if test="${sessionScope.current_user != null && comment != null}">
                                <div class="module-body inner-top-xs" >
                                    <ul class="list-unstyled review-list">
                                        <li>
                                            <section class="paper">
                                                <div class="tape"></div>
                                                <div class="head"></div>

                                                <div class="row review-content">
                                                    <div class="col-md-2 col-sm-2">
                                                        <div class="customer-image-text">
                                                            <img src="/assets/images/customers/1.jpg" alt="">
                                                        </div>
                                                        <p style="width: 150px;">学号：${sessionScope.current_user.stuNum}</p>
                                                        <div onclick="submitComment()" class="text-center" style="cursor: pointer;">
                                                            <div class="actions">
                                                                <a>
                                                                    <span class="book-price price">提交评论</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-10 col-sm-10">
                                                        <input type="hidden" value="${comment.id}" id="commentId">
                                                        <input type="hidden" name="" value="${comment.content}" id="commentText">
                                                        <textarea id="myComment"  style="height: 164px; width: 564px;" class="text"></textarea>

                                                    </div>
                                                </div>

                                            </section>
                                        </li>

                                    </ul>
                                </div>
                            </c:if>

                        </div>

                    </div><!-- /.col -->
                    <div class="col-md-3 col-md-pull-9">
                        <aside class="sidebar">
                            <!-- ============================================== BOOKS BY SUBJECT ============================================== -->
                            <div class="sidebar-module">
                                <div class="sidebar-module-heading">
                                    <h4 class="sidebar-module-title">相关书籍</h4>
                                </div>
                                <div class="sidebar-module-body clearfix">
                                    <ul class="list-unstyled">
                                        <c:forEach items="${books}" var="aboutBook">
                                            <li><a href="/book/bookDetail?bookId=${aboutBook.id}">${aboutBook.name}</a></li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </div>
                            <!-- ============================================== BOOKS BY SUBJECT : END ============================================== -->

                        </aside>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container -->
        </div><!-- /.content -->
        <!-- ============================================== FOOTER ============================================== -->
        <footer class="footer clearfix">
            <div class="margin-top-10">
                <div class="container inner-top-vs">
                    <!-- ============================================== FOOTER-TOP ============================================== -->
                    <div class="row">
                        <div class="col-md-3 col-sm-4">
                            <div class="footer-module">
                                <h4 class="footer-module-title">关于本网站</h4>
                                <div class="footer-module-body m-t-20 clearfix">
                                    <p><span class="pull-left"><img src="/assets/images/footer-logo.png" alt=""
                                                                    width="75" height="75"></span>一个cras tincidunt，ut
                                        tellus et。Gravida scele risque，ipsum sed iacul is，nunc non namtellus。Placerat
                                        sed phasellus，purus purus elit。Cras ante eros。Erat vel。Donec vestibulum sed，vel
                                        euismod donec。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-4">
                            <div class="footer-module">
                                <h4 class="footer-module-title">分类</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">图书</a></li>
                                        <li><a href="#">课本</a></li>
                                        <li><a href="#">Nook书籍</a></li>
                                        <li><a href="#">有声读物</a></li>
                                        <li><a href="#">杂志</a></li>
                                    </ul>

                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">电影</a></li>
                                        <li><a href="#">音乐</a></li>
                                        <li><a href="#">游戏</a></li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-4 clearfix ">
                            <div class="footer-module">
                                <h4 class="footer-module-title">信息</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">跟踪订单</a></li>
                                        <li><a href="#">交货</a></li>
                                        <li><a href="#">退货政策</a></li>
                                        <li><a href="#">礼品卡</a></li>
                                    </ul>

                                    <ul class="list-unstyled link-list">
                                        <li><a href="#">联系我们</a></li>
                                        <li><a href="#">商店位置</a></li>
                                        <li><a href="#">常问问题</a></li>
                                        <li><a href="#">使用条款</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12">
                            <div class="footer-module">
                                <h4 class="footer-module-title">连</h4>
                                <div class="footer-module-body clearfix">
                                    <ul class="clearfix list-unstyled footer-social-contact">
                                        <li><a href="#" class="fa fa-facebook" title="Facebook的"></a></li>
                                        <li><a href="#" class="fa fa-pinterest" title="Pinterest的"></a></li>
                                        <li><a href="#" class="fa fa-linkedin" title="LinkedIn"></a></li>
                                        <li><a href="#" class="fa fa-twitter" title="推特"></a></li>
                                        <li><a href="#" class="fa fa-google-plus" title="Google Plus"></a></li>
                                        <li><a href="#" class="fa fa-rss" title="RSS"></a></li>
                                        <li><a href="#" class="fa fa-instagram" title="Instagram的"></a></li>

                                    </ul>


                                    <div class="inner-top-xs">
                                        <p>订阅我们的每周时事通讯。</p>
                                        <form class="searchform" action="http://inspectelement.com/" method="get">
                                            <input class="s" type="text" placeholder="Email Address" name="s" value="">
                                            <input class="searchsubmit" type="submit" value="订阅">
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================== FOOTER-TOP : END ============================================== -->
                    <hr>
                    <!-- ============================================== FOOTER-BOTTOM ============================================== -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="pull-left">
                                <ul class="payment-list list-unstyled">
                                    <li><a href="#"><img src="/assets/images/payments/1.png" class="img-responsive"
                                                         height="22" alt=""></a></li>

                                </ul>
                            </div>
                            <p class="copyright-footer pull-right">©2014 Bookshop。版权所有。由</font><a href="#">Heztheme</a>用爱制造<a
                                    href="#"></a></p>
                        </div>
                    </div>
                    <!-- ============================================== FOOTER-BOTTOM : END ============================================== -->
                </div>
            </div>
        </footer>
        <!-- ============================================== FOOTER : END ============================================== -->
    </div><!-- /.st-pusher -->
    <!-- ============================================== TOGGLE RIGHT CONTENT ============================================== -->

    <c:if test="${sessionScope.current_user == null}">
        <jsp:include page="needLogin.jsp"/>
    </c:if>
    <c:if test="${sessionScope.current_user != null}">
        <jsp:include page="content.jsp"/>
    </c:if>

    <!-- ============================================== TOGGLE RIGHT CONTENT : END ============================================== -->


</div><!-- /#wrapper -->

<script src="/assets/js/jquery-1.11.2.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/perfect-scrollbar.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/jquery.customSelect.min.js"></script>
<script src="/assets/js/jquery.easing-1.3.min.js"></script>
<script src="/assets/js/wow.min.js"></script>
<script src="/assets/js/echo.min.js"></script>
<script src="/assets/js/scripts.js"></script>
</body>
</html>
<script type="text/javascript">
    function borrowBook() {
        var bookId = $("#bookId").val();
        $.ajax({
            url:'/book/borrowBook?bookId=' + bookId,
            dataType:'JSON',
            type:'GET',
            success:function (reuslt) {
                alert(reuslt.msg);
                return;
            }
        });
    }
    $("#myBook").on('click', '#backBook', function () {
        var bookId = $(this).prevAll("#backBookId").val();
        if (!confirm("确定归还该图书吗？")) {
            return false;
        }
        $.ajax({
            url:'/borrow/backBook?bookId=' + bookId,
            dataType:'JSON',
            type:'GET',
            success:function (result) {
                if (result.code == 200) {
                    alert(result.msg);
                    window.location.reload();
                } else {
                    alert(result.msg)
                    return;
                }
            }
        })
    });


    $("#myComment").html($("#commentText").val());
    function submitComment() {
        var commentId = $("#commentId").val();
        var comment = $("#myComment").val();
        // alert(comment);
        var bookId = $("#bookId").val();
        // alert(bookId)
        $.ajax({
            url:'/comment/addComment',
            dataType:'JSON',
            type:'POST',
            data:{
                id:commentId,
                content:comment,
                bookId:bookId
            },
            success:function (result) {
                if (result.code == 200) {
                    alert(result.msg);
                    window.location.reload();
                } else {
                    alert(result.msg);
                    return false;
                }
            }
        })

    }
</script>
